<template>
  <div>
    <Top
      :list="list"
      :columns="tableColumns"
      :childev="setchil"
      :add="add"
    ></Top>
    <Table
      :list="showlist"
      :columns="tableColumns"
      :page="page"
      :pageSize="pageSize"
      :lodding="lodding"
      :xiang="xiang"
    ></Table>
    <Page
      :page="page"
      :pageSize="pageSize"
      :list="list"
      :lists="list.length"
      :total="Math.ceil(list.length / pageSize)"
      :sha="sha"
      :xia="xia"
      :load="load"
      :setpageSize="setpageSize"
      :setlodding="setlodding"
    ></Page>
    <el-dialog
      v-model="chil"
      title="仓库管理"
      width="800"
      height="500"
      draggable
      overflow
    >
      <Basex :Xlist="Xlist" :tableColumns="tableColumns"></Basex>
    </el-dialog>
    <el-dialog
      v-model="addiv"
      title="仓库管理"
      width="800"
      height="500"
      draggable
      overflow
    >
      <Additem :tableColumns='tableColumns' :chile='chile'></Additem>
    </el-dialog>
  </div>
</template>
    
<script setup>
import Top from "../component/top.vue";
import Table from "../component/table.vue";
import Page from "../component/pages.vue";
import Basex from "../component/basex.vue";
import Additem from "../component/additem.vue";


import { ref, reactive, onMounted, computed } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
const router = useRouter();
const list = ref([]);
const chile = ref({
  title: "[编辑]供应商管理",
  name: "客户管理"
})
const tableColumns = ref([
  { feg: false, key: "proposer", label: "申请人" },
  { feg: false, key: "bumenpro", label: "申请部门" },
  { feg: false, key: "dancode", label: "单号" },
  { feg: true, key: "name", label: "客户名称" },
  { feg: false, key: "setname", label: "所属人" },
  { feg: true, key: "clienttype", label: "客户类型" },
  { feg: false, key: "source", label: "来源" },
  { feg: true, key: "unit", label: "单位" },
  { feg: true, key: "phone", label: "电话" },
  { feg: true, key: "phones", label: "手机" },
  { feg: true, key: "province", label: "省" },
  { feg: true, key: "city", label: "市" },
  { feg: true, key: "email", label: "邮箱" },
  { feg: true, key: "address", label: "地址" },
  { feg: false, key: "traffic", label: "交通路线" },
  { feg: true, key: "state", label: "状态" },
  { feg: false, key: "mark", label: "是否标星" },
  { feg: false, key: "suppiler", label: "是否为供应商" },
  { feg: false, key: "contacts", label: "联系人" },
  { feg: true, key: "explain", label: "说明" },
  { feg: false, key: "pactnum", label: "合同数量" },
  { feg: true, key: "rental", label: "销售总额" },
  { feg: false, key: "due", label: "待收金额" },
]);
const page = ref(1);
const pageSize = ref(2);
const lodding = ref(false);
const chil = ref(false);
const addiv = ref(false);
const Xlist = ref({});

onMounted(async () => {
  const res = await axios.get("http://127.0.0.1:3000/admin//get_supplierlist");
  list.value = res.data.data;
});

const setchil = (setcolumn) => {
  setcolumn.forEach((item, index) => {
    tableColumns.value[index].feg = item.feg;
  });
};

const sha = (i) => {
  console.log(i);
  if (i != -1 || i == list.value.length + 1) {
    page.value = i;
  } else {
    page.value--;
  }
};
const xia = () => {
  page.value++;
  console.log("xia");
};

const load = (row) => {
  page.value = row;
};

const setpageSize = (i) => {
  pageSize.value = i;
};

const showlist = computed(() => {
  let start = (page.value - 1) * pageSize.value;
  let end = page.value * pageSize.value;
  return list.value.slice(start, end);
});

const setlodding = () => {
  lodding.value = true;
  setTimeout(() => {
    lodding.value = false;
  }, 100);
};

const xiang = (item) => {
  Xlist.value = item;
  console.log(item);
  chil.value = true;
};

const add = () => {
  addiv.value = true;
};
</script>
    
<style>
</style>